<template>
	<view class="change">
		<view class="form wrapper
						position-relative center-horizontally 
						rounded shadow-plain"
			:style="{
				marginTop: (200 - KeyboardHeight) + 'rpx'
			}"
		>
			<my-form name="emailForm"
					@keyboardChange="keyboardChange"
					:formAttr="{
						labelWidth: 100,
						labelPosition: 'right'
					}"
					:model="form"
					:rules="rules"
					:form-items="formItems"
					:btn-attr="btnAttr"
					@submit="submit"
					
			></my-form>
			<view class="goLogin" @click="$go('/pages/user/login/index')">登录</view>
		</view>
	</view>
</template>

<script>
	import myForm from "@/components/my-form/my-form.vue";
	import {
		getEmailCode,
		changePassword
	} from "@/api/user.js";
	
	export default {
		components: {
			myForm
		},
		data() {
			// 激活态按钮
			const activeBtn = {
					color: "#363636",
					width: "200rpx",
					background: '#63e235',
					cursor: "pointer"
				};
			// 失效按钮	
			const disableBtn = {
					color: "#828282",
					width: "300rpx",
					background: '#dde2dd',
					cursor: "pointer"
				};
			return {
				form: {
					email: '1829158687@qq.com',
					password: '123456',
					checkPassword: '123456',
					code: ''
				},
				rules: {
					'email': {
						type: 'email',
						required: true,
						message: '请输入正确邮箱',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						min: 8,
						required: true,
						message: '请输入8位以上的密码',
						trigger: ['blur', 'change']
					},
					checkPassword: {
						// type: 'string',
						required: true,
						message: '两次输入的密码不一致',
						validator: (rule, value, callback) => {
							return value == this.form.password;
						},
						trigger: ['blur', 'change']
					},
				},
				formItems: [
					{
						label: '邮箱',
						prop: 'email',
						borderBottom: true,
						ref: 'item1',
						leftIcon: 'email',
						input: {
							placeholder: '请输入邮箱'
						}
					},
					{
						label: '密码',
						prop: 'password',
						borderBottom: true,
						ref: 'item2',
						leftIcon: 'lock',
						input: {
							placeholder: '请输入长度大于8位的密码',
							password: true
						}
					},
					{
						label: '确认密码',
						prop: 'checkPassword',
						borderBottom: true,
						ref: 'item3',
						leftIcon: 'checkmark-circle',
						input: {
							placeholder: '请再次输入密码',
							password: true
						}
					},
					{
						label: '验证码',
						prop: 'code',
						borderBottom: true,
						ref: 'item4',
						leftIcon: 'error-circle',
						hasBtn: true,
						btn: {
							text: "获取验证码",
							style: activeBtn,
							class: ["text-center"]
						},
						fn: this.getEmailCode,
						input: {
							placeholder: '请输入验证码',
							password: false
						}
					},
				],
				btnAttr: {
					color: '#a0dcef',
					shape: 'circle',
					throttleTime: 1000,
					text: '确认更改密码'
				},
				KeyboardHeight: 0,
				regTimer: null,
				regTimerNum: 0,
				activeBtn: activeBtn,
				disableBtn: disableBtn
			};
		},
		methods: {
			// 获取邮箱验证码
			getEmailCode() {
				const emailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if(!emailReg.test(this.form.email)) return this.$msg("邮箱格式不正确，请重新输入！");
				if(this.regTimerNum <= 0) {
					getEmailCode({
						email: this.form.email
					}).then(res => {
						this.regTimerNum = 60;
						this.regTimer = setInterval(() => {
							this.regTimerNum--;
							// 当计数为0时清除掉定时器
							if(this.regTimerNum <= 0) {
								clearInterval(this.regTimer);
								this.regTimer = null;
							};
							this.renderBtn();
						}, 1000);
						this.renderBtn();
					}).catch(err => this.$msg(err.message));
				}
			},
			// 渲染获取验证码的按钮
			renderBtn() {
				if(this.regTimer <= 0) {
					this.formItems[3].btn.text = "获取验证码";
					this.formItems[3].btn.style = this.activeBtn;
				}else {
					this.formItems[3].btn.text = `${this.regTimerNum}秒后获取验证码`;
					this.formItems[3].btn.style = this.disableBtn;
				}
			},
			//提交更改
			submit(value) {
				changePassword(value).then(res => {
					//清除form的内容
					this.form = {
						email: '',
						password: '',
						checkPassword: '',
						code: ''
					}
					
					this.$msg("更改密码成功！");
					this.$cache.clearBackUrl();
					this.$go("/pages/user/login/index", null, 'reLaunch');
				}).catch(err => this.$msg(err.message));
			}
		},
		onUnload() {
			// 清除定时器
			if(this.regTimer) {
				clearInterval(this.regTimer);
				this.regTimer = null;
				this.regTimerNum = 0;
			}
		},
	}
</script>

<style lang="scss" scoped>
.change{
	background: url("@/static/login/loginBg.webp") no-repeat;
	background-size: 100% 100%;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	.form{
		width: 550rpx;
		padding: 40rpx;
		// height: 600rpx;
		background-color: rgba(#fff, .3);
		/* #ifdef H5 */
		margin-top: 700rpx;
		/* #endif */
		/* #ifndef H5 */
		margin-top: 760rpx;
		/* #endif */
		overflow: hidden;
	}
	.goLogin{
		float: right;
		margin-top: 30rpx;
		/* #ifdef H5 */
		font-size: 25rpx;
		/* #endif */
		/* #ifndef H5 */
		font-size: 30rpx;
		/* #endif */
		color: #0000ff;
		cursor: pointer;
	}
}
</style>
